<template>
	<view class="mydiy" :style="colorStyle">
		<skeletons :show="showSkeleton" loading="chiaroscuro" bgcolor="#FFF"></skeletons>
		<view class="v-nav" :style="'margin-top:' + (navH) + 'px'">
			<view v-for="(item,index) in swiperTabs" :key="index" class="v-nav-item" :class="{curr:currSwiperIndex==index}" @click="switchTab(index)" >
				{{item}}
				<view class="v-nav-border"></view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<swiper class="v-swiper" :style="'height: calc(100vh - '+navH+'px - 47px - 82rpx);'" :current="currSwiperIndex" :duration="300" @change="onSwiperChange">
			<swiper-item><myFollow ref="myFollow"></myFollow></swiper-item>
			<swiper-item><myIndex ref="myIndex"></myIndex></swiper-item>
			<swiper-item><myCollect ref="myCollect"></myCollect></swiper-item>
		</swiper>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<swiper class="v-swiper" :display-multiple-items="1" :style="'height: calc(100vh - '+navH+'px - 47px - 40px - 82rpx);'" :current="currSwiperIndex" :duration="300" @change="onSwiperChange">
			<swiper-item><myFollow ref="myFollow"></myFollow></swiper-item>
			<swiper-item><myIndex ref="myIndex"></myIndex></swiper-item>
			<swiper-item><myCollect ref="myCollect"></myCollect></swiper-item>
		</swiper>
		<!-- #endif -->
		<tabBar :dataConfig="tabBar.default" :pagePath="'/pages/index/index'"
			@click.native="bindEdit('tabBar', 'default')"></tabBar>
	</view>
</template>

<script>
	let that,app = getApp();
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	// #ifdef MP || APP-PLUS
	import {
		SUBSCRIBE_MESSAGE,
		TIPS_KEY
	} from "@/config/cache";
	// #endif
	import {
		getTempIds,
		siteConfig
	} from "@/api/api.js";
	import colors from "@/mixins/color";
	import {
		mapGetters
	} from "vuex";
	import skeletons from "../visualization/components/skeleton.vue";
	import tabBar from "../visualization/components/tabBar";
	import myFollow from "./components/myFollow";
	import myIndex from "./components/myIndex";
	import myCollect from "./components/myCollect";
	export default{
		data(){
			return {
				showSkeleton: true, //骨架屏显示隐藏
				navH: statusBarHeight,
				tabBar: {}, //导航
				swiperTabs:["关注","首页","收藏"],
				currSwiperIndex: 1
			}
		},
		components: {
			skeletons,tabBar,myFollow,myIndex,myCollect
		},
		mixins: [colors],
		computed: mapGetters(["isLogin", "uid"]),
		created() {
			that = this;
			uni.hideTabBar();

			that.getInitDataIndex();
		},
		onShow(){
			console.log("a");
		},
		methods:{
			onLoadFun() {},
			getInitDataIndex(){
				that.$http.get("v1/getInitDataIndex",{},true).then(res=>{
					that.tabBar = res.data.diyData.tabBar;
					that.$Cache.set("TAB_BAR", that.tabBar.default.tabBarList);
					that.showSkeleton = false;
					that.swiperTabs = res.data.swiperTabs;
				});
			},
			changeCurrSwiperIndex(index){
				that.currSwiperIndex = index
			},
			onSwiperChange(e){
				let index = e.target.current || e.detail.current;
				that.switchTab(index);
			},
			switchTab(index){
				if (that.currSwiperIndex == index) return;
				that.currSwiperIndex = index
				if(index == 0){
					this.$refs.myFollow.reload();
				}else if(index == 1){
					// this.$refs.myIndex.getProductListByMType("reset");
					this.$refs.myIndex.getInitDataMyIndex();
				}else if(index == 2){
					this.$refs.myCollect.reload();
				}
			},
			bindEdit(name, dataName) {
				if (app.globalData.isIframe) {
					window.parent.postMessage({
							name: name,
							dataName: dataName,
							params: {},
						},
						"*"
					);
					return;
				}
			},
			// #ifdef MP
			getTempIds() {
				getTempIds().then((res) => {
					if (res.data) {
						wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
					}
				});
			},
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.mydiy{
		.v-nav{
			display: flex;
			height: 40px;
			width: 90%;
			margin: 0 auto;
			align-items: center;
			font-size: 34rpx;
			.v-nav-item{
				margin-right: 10px;
				padding-bottom: 10rpx;
				position: relative;
				&.curr{
					font-size: 34rpx;
					margin-right: 10px;
					padding-bottom: 10rpx;
					color: var(--view-theme);
					.v-nav-border{
						position: absolute;
						bottom: 0;
						left: calc(50% - 10px);
						height: 2px;
						width: 20px;
						background-color: var(--view-theme);
					}

				}
			}
		}
		.v-swiper{
			width: 96%;
			margin: 0 auto;
			box-sizing: border-box;
		}
	}
	

</style>